<!DOCTYPE HTML>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0, user-scalable=0, initial-scale=1.0, width=device-width"/>
    <meta name="format-detection" content="telephone=no, email=no, date=no, address=no">
    <title>Main</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../css/style.css" />
	<style>
		#con{
			margin: 10px;
			font-size: 24px;
		}
    body{background: #DCDCDC;padding-top: 5px;}
    .Main-Engine-First {
        border-radius: 10px;
        line-height: 60px;
        background: #FFFFFF;
        border-color: #000000;
        margin-left: 8px;
        margin-right: 8px;
        height: 235px;
        padding-top: 5px;
    }

    .Main-Engine-f_1 {
        height: 80px;
    }

    .Main-Engine-left {
        width: 80%;
        float: left;
    }

    .Main-Engine-right {
        width: 20%;
        float: right;
    }

    .Main-Engine-f_2 {
        height: 25px;
    }

    .Main-Engine-f_3 {
        height: 1px;
        margin-right: 10px
    }

    .Main-Engine-f_4 {
        height: 10px
    }

    .Main-Engine-pic1 {
        width: 50px;
        height: 50px;
        color: green;
        margin-right: 8px;
    }

    .Main-Engine-f_11 {
        font-size: 20px;
        margin: 10px;
        text-align: left;
    }

    .Main-Engine-f_12 {
        font-size: 12px;
        color: blue;
        margin-top: 15px;
        margin-right: 10px;
        text-align: right;
    }

    .Main-Engine-point {
        display: block;
        background: blue;
        border-radius: 100%;
        width: 10px;
        height: 10px;
        /*top:20px;
  right:20px;*/
        position: center;
        margin-left: 8px;
    }

    .Main-Engine-f_2>div {
        display: inline-block;
        text-align: center;
        font-size: 12px;
        line-height: 12px;
        width: 20%;
        float: left;
    }

    .Main-Engine-f_2 {
        line-height: 20px;
    }

    .Main-Engine-bb1 {
        text-align: center;
        font-size: 12px;
        line-height: 12px;
        width: 13%;
        float: right;
    }

    .Main-Engine-bb2 {
        text-align: center;
        font-size: 12px;
        line-height: 12px;
        width: 13%;
        float: right;
    }

    .Main-Engine-bb3 {
        text-align: center;
        font-size: 12px;
        line-height: 12px;
        width: 13%;
        float: right;
    }

    .Main-Engine-bb4 {
        text-align: center;
        font-size: 12px;
        line-height: 12px;
        width: 13%;
        float: right;
    }

    .Main-Engine-bb5 {
        text-align: center;
        font-size: 12px;
        line-height: 12px;
        width: 13%;
        float: right;
    }

    .Main-Engine-left1 {
        width: 50%;
        float: left;
    }

    .Main-Engine-right1 {
        width: 50%;
        float: right;
    }

    .Main-Engine-f_41 {
        text-align: left;
        margin-left: 20px;
        font-size: 12px;
        color: grey;
        padding-bottom: 10px;
    }

    .Main-Engine-f_42 {
        text-align: right;
        margin-right: 10px;
        font-size: 15px;
        color: grey;
    }
	</style>
</head>
<body style="background-color:#fff;">
  <div class="Main-Engine-First" style="border:2px #81b846 solid;" onclick="toDetail()">
      <div class="Main-Engine-f_1">
          <div class="Main-Engine-left">
              <p class="Main-Engine-f_11"><img class="Main-Engine-pic1" src="../image/csx/head.jpg" align="absmiddle">庆科农业智能主机</p>
          </div>
          <div class="Main-Engine-right">
              <p class="Main-Engine-f_12">在线<span style="position:relative"><i class="Main-Engine-point"></i></span></p>
          </div>
      </div>
      <div class="Main-Engine-f_2">
          <div class="Main-Engine-box1">
              <img src="../image/csx/temp2.png" width="25px">
              <p>24.01℃</p>
          </div>
          <div class="Main-Engine-box2">
              <img src="../image/csx/temp1.png" width="25px">
              <p>44.07%RH</p>
          </div>
          <div class="Main-Engine-box3">
              <img src="../image/csx/weather.png" width="25px">
              <p>12Lux</p>
          </div>
          <div class="Main-Engine-box4">
              <img src="../image/csx/co2.png" width="25px">
              <p>594ppm</p>
          </div>
          <div class="Main-Engine-box5">
              <img src="../image/csx/thermometer50.png" width="25px">
              <p>22.46℃</p>
          </div>
          <div class="Main-Engine-box6">
              <img src="../image/csx/outdoor.png" width="25px">
              <p>34.28%RH</p>
          </div>
      </div>
      <div class="Main-Engine-f_3">
          <br>
          <p class="Main-Engine-bb1">1x<img src="../image/csx/monitor.jpg" width="20px" align="absmiddle"></p>
          <p class="Main-Engine-bb2">1x<img src="../image/csx/paper2.png" width="20px" align="absmiddle"></p>
          <p class="Main-Engine-bb3">2x<img src="../image/csx/paper.png" width="20px" align="absmiddle"></p>
          <p class="Main-Engine-bb4">1x<img src="../image/csx/tap.png" width="20px" align="absmiddle"></p>
          <p class="Main-Engine-bb5">2x<img src="../image/csx/fan.png" width="20px" align="absmiddle"></p>
      </div>
      <div class="Main-Engine-f_4">
          <div class="Main-Engine-left1">
              <p class="Main-Engine-f_41">LSF0021A0000000007</p>
          </div>
          <div class="Main-Engine-right1">
              <p class="Main-Engine-f_42">eet、eer、eey</p>
          </div>
      </div>
  </div>
    <div class="footer-extend"></div>
</body>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript" src="../script/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
    apiready = function(){
      var UIScrollPicture = api.require('UIScrollPicture');
      $("#slider-placeholder").css("height", (api.winWidth-8)*0.47);

    };
    function toDetail(){
      api.openWin({
          name: 'toDetail',
          url: './MainframeDetail/detail_win.html',
      });

    }
</script>
</html>
